.marke{
	padding: 24px 0;
	background-color: #f8f9fc;
}
.marke-title{
	font-size: 16px;
	padding:10px 0 0 26px ;
	background:url('../img/pic/icon_ai.png')no-repeat left;
	color: #2B33A8;
}
.marke-type{
	margin-top: 20px;
	background-color: #ffffff;
	padding:10px;
	font-size: 14px;
	.item{
		display: flex;
		justify-content: space-between;
		margin: 10px 0;
		.list{
			display: inline-block;
			color: #666666;
			padding: 4px 14px;
			border: 1px solid #fff;
			margin: 4px 0;
		}
		.item-a{
			flex: 1;
			max-height: 34px;
			overflow: hidden;
			transition: all 0.3s ease-in 10ms;
		}
		.item-active{
			 max-height: 200px;
		}
		a.list:hover{
			color: #2B33A8;
		}
		a.active{
			color: #2B33A8;
			border: 1px solid #2B33A8;
			background-color: #f3f3fa;
		}
		.expand{
			display: flex;
			align-items: center;
			height: 34px;
			color: #2B33A8;
			cursor: pointer;
			img{
				width: 20px;
				height: 20px;
				transition: all 0.3s ease-in 10ms;
			}
		}
		.expand-active{
			img{
				transform: rotateX(180deg)
			}
		}
	}
}
.marke-list{
	margin-top: 30px;
	flex-wrap: wrap;
	.list{
		width: calc((100% - 60px) / 4);
		background-color: #ffffff;
		margin-left: 20px;
		margin-bottom: 20px;
		transition: all 0.3s ease-in 10ms;
		.f-img{
			position: relative;
			height: 180px;
			overflow: hidden;
			img{
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: all 0.3s;
			}
		}
		.cont-text{
			padding: 10px;
			img{
				width: auto;
				height: 40px;
				margin-top: 10px;
			}
			h3{
				margin-top: 10px;
				font-size: 18px;
				font-weight: bold;
				line-height: 1.5;
			}
			h3:hover{
				color: #2B33A8;
			}
			p{
				margin-top: 10px;
				font-size: 14px;
				color: #666;
				line-height: 1.6;
			}
			.label{
				margin-top: 20px;
				display: flex;
				a{
					color: #999999;
					font-size: 14px;	
				}
				i{ 
					color: #999999;
					margin: 0 8px;
				}
				a:hover{
					color: #2B33A8;
				}
				
			}
		}
	}
	.list:hover{
		box-shadow:0px 10px 20px 0px rgba(0, 0, 0, 0.2);
		img{
			transform: scale(1.1);
		}
	}
	.list:nth-child(4n + 1){
		margin-left: 0px;
	}
}

@media only screen and (max-width: 750px) {
	.marke{
		padding: 0.2rem 0.1rem;
	}
	.marke-title{
		padding:0.1rem 0 0 0.2rem ;
	}
	.marke-type{
		margin-top: 0.2rem;
		padding:0.1rem;
		font-size: 0.13rem;
		.item{
			margin: 0.1rem 0;
			.list{
				padding: 0.04rem 0.13rem;
				margin: 0.03rem 0;
			}
			.item-a{
				max-height: 0.34rem;
			}
			.item-active{
				 max-height: 10rem;
			}
			.expand{
				height: 0.34rem;
				img{
					width: 0.2rem;
					height: 0.2rem;
				}
			}
		}
	}
	.marke-list{
		margin-top: 0.3rem;
		flex-wrap: wrap;
		.list{
			width: calc((100% - 0.2rem) / 2);
			background-color: #ffffff;
			margin-left: 0.2rem;
			margin-bottom: 0.2rem;
			transition: all 0.3s ease-in 10ms;
			.f-img{
				position: relative;
				height: 1rem;
				overflow: hidden;
				img{
					display: block;
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: all 0.3s;
				}
			}
			.cont-text{
				padding: 0.06rem;
				img{
					width: auto;
					height: 0.3rem;
					margin-top: 0.1rem;
				}
				h3{
					margin-top: 0rem;
					font-size: 0.13rem;
					font-weight: bold;
					line-height: 1.5;
				}
				h3:hover{
					color: #2B33A8;
				}
				p{
					margin-top: 0.08rem;
					font-size: 0.11rem;
					color: #666;
					line-height: 1.6;
				}
				.label{
					margin-top: 0.16rem;
					display: flex;
					a{
						color: #999999;
						font-size: 0.1rem;	
					}
					i{ 
						color: #999999;
						margin: 0 0.06rem;
					}
					a:hover{
						color: #2B33A8;
					}
					
				}
			}
		}
		.list:hover{
			box-shadow:0px 10px 20px 0px rgba(0, 0, 0, 0.2);
			img{
				transform: scale(1.1);
			}
		}
		.list:nth-child(2n + 1){
			margin-left: 0px;
		}
	}
}